import React,{useState} from 'react';
import NavHome from '../NavHome/NavHome';
import { Tabs,Button } from 'antd-mobile';
import ReactChild from './components/ReactChild'
import ReactChildT from './components/ReactChildT'
import './ReactView.scss'
export default function ReactView(){
    const  [msg,changeMsg] = useState();
    const  [Childmsg,changeChildmsg] = useState('等待子组件传值中~~~');
    const  [brotherOne,changebrotherOne] = useState('等待兄弟组件传值中~~~');
    const  [brotherTwo,changebrotherTwo] = useState('等待兄弟组件传值中~~~');
    const tabs = [
        { title: '父传子' },
        { title: '子传父'},
        { title: '兄弟传递' },
      ];
    function sendMsg(m){
        changeMsg(m)
    }
    function getParent(e){
        changeChildmsg(e)
    }
    function changeChild(e){
        changeChildmsg(e)
    }
    function brotherFn(e,i){
        if(i==0){
            changebrotherTwo(e)
        }
        if(i==1){
            changebrotherOne(e)
        }
    }
    return(
        <div className="ReactView">
             <Tabs tabs={tabs}
              initialPage={0}
            >
                <div className="ReactView-item">
                    <Button onClick={()=>{sendMsg('我是从父级来的')}} className="btn" size="small" type="primary">点我传值</Button>
                    <ReactChild type="parent" msg={msg}/>
                </div>
                <div className="ReactView-item">
                    <p>{Childmsg}</p>
                    <ReactChild change={changeChild} onClick={getParent} type="mySelf"/>
                </div>
                <div  className="ReactView-item">
                    <ReactChild onClick={()=>{brotherFn('我是兄弟一过来的',0)}} brother={brotherOne} type="brother"/>
                    <ReactChildT onClick={()=>{brotherFn('我是兄弟二过来的',1)}} brother={brotherTwo} />
                </div>
            </Tabs>            
            <NavHome/>
        </div>
    )
}